<!doctype html>
<html>

  <head>
    <meta charset="utf-8">
    <title>设备资料库筛选</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../../../css/mui.min.css" rel="stylesheet" />
    <link href="../css/common.css" rel="stylesheet" />
    <link href="../css/helper.css" rel="stylesheet" />
    <style>
      .mui-bar-nav~.mui-content {
        padding-top: 61px !important;
        padding-left: 13px;
        padding-right: 13px;
      }
      
      .img-tool-box {
        height: inherit;
        min-width: 33px;
      }
      
      .img-tool {
        width: 19px;
        height: 19px;
        margin-top: 10px;
      }
      
      .search-box {
        margin-bottom: 24px;
      }
      
      .search-picker {
        width: 98px;
        height: 47px;
        background: #FFFFFF;
        border: 0px solid #DCDCDC;
        border-radius: 3px;
        margin: 0px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
      }
      
      .search-input {
        width: 98px;
        height: 47px;
        background: #FFFFFF;
        border: 0px solid #DCDCDC;
        border-radius: 3px;
        margin: 0px;
        border-left: 1px solid #DCDCDC;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #3188FE;
        padding-left: 14px;
      }
      
      ul {
        background-color: inherit !important;
      }
      
      .list-item {
        margin-bottom: 24px;
        background: inherit;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #333333;
      }
      
      .mui-table-view:before,
      .mui-table-view:after,
      .mui-table-view-cell:after {
        background-color: inherit !important;
      }
      
      .mui-card {
        margin: 0
      }
    </style>
  </head>

  <body>
    <div id="container" v-cloak>
      <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">区域场站</h1>
      </header>
      <div class="mui-content">
        <div id="slider" class="mui-slider mui-fullscreen">
          <div class="tab-content mui-slider-group" id="tab-content">
            <div id="item1" class="mui-slider-item mui-control-content mui-active">
              <div id="scroll" class="regular-scroll mui-scroll-wrapper">
                <div class="mui-scroll">
                  <div class="mui-card">
                    <ul class="mui-table-view mui-table-view-chevron">
                      <li class="mui-table-view-cell mui-collapse" v-for="(item,index) in device">
                        <a class="mui-navigate-right" href="#">{{item.areaName}}</a>
                        <ul class="mui-table-view mui-table-view-chevron">
                          <li class="mui-table-view-cell" v-for="(items,indexs) in item.stationList" @tap="toSchedule(item,items)">
                            <a class="mui-navigate-right" href="#">{{items.stationName}}</a>
                          </li>

                        </ul>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="../../../js/mui.js"></script>
    <script src="../../../js/mui.pullToRefresh.js"></script>
    <script src="../../../js/mui.pullToRefresh.material.js"></script>
    <!-- <script src="../../../../js/jquery-1.7.2.min.js"></script> -->
    <script type="text/javascript" src="../../../../js/jquery-3.2.1.min.js"></script>
    <script src="../../../js/vue.js"></script>
    <script src="../js/mkeyplus.base.js"></script>
    <script type="text/javascript">
      mui.init()
      var code = 1
      if(window.plus) {
        plusready();
      } else {
        document.addEventListener('plusready', plusready, false);
      }

      function plusready() {
        var self = plus.webview.currentWebview();
        console.log(self.ids)
        code = self.code
        // vm.ids = self.ids
        // vm.getDetils()
      }
      let vm = new Vue({
        el: "#container",
        data: {
          form: {
            page: 1,
            size: 20,
            system: 'APP',
            status: 1
          },
          device: []
        },
        created: function() {
          this.getDeviceList();
        },
        methods: {
          getDeviceList() {
            // this.ids=id;
            if(this.form.page === 1) {
              // plus.nativeUI.showWaiting('加载中...');
            }
            mui.baseApp.httpRequst("post", "/sys/general/menuTree", {
              page: this.form.page,
              size: this.form.size,
              // classifyCode:id,
            }, (data) => {
              console.log('www', data)
              // plus.nativeUI.closeWaiting();
              if(this.form.page == 1) {
                this.device = []
              }
              this.device = this.device.concat(data.data)
//            if(data.data.length < this.form.size) { //
//              mui("#item1 .mui-scroll").pullToRefresh().endPullUpToRefresh(true); //参数为true代表没有更多数据了。
//              return;
//            } else {
//              mui("#item1 .mui-scroll").pullToRefresh().endPullUpToRefresh(false); //参数为true代表没有更多数据了。
//              mui("#item1 .mui-scroll").pullToRefresh().refresh(true); //启用上拉加载
//            }
            }, function() {
              // plus.nativeUI.closeWaiting()
              console.log("获取数据失败");
            })
          },
          toSchedule(item, items) {
            mui.fire(plus.webview.currentWebview().opener(), 'searchArea', {
              areaId: items.areaId,
              stationId: items.stationId,
              areaName: item.areaName,
              stationName: items.stationName
            })
            mui.back()
          }
        }
      });
      (function($) {
        //阻尼系数
        var deceleration = mui.os.ios ? 0.003 : 0.0009;
        $('.mui-scroll-wrapper').scroll({
          bounce: false,
          indicators: true, //是否显示滚动条
          deceleration: deceleration
        });
        $.ready(function() {
//        $('.mui-scroll').pullToRefresh({
//          down: {
//            callback: function() {
//              var self = this;
//              setTimeout(function() {
//                vm.form.page = 1
//                vm.getDeviceList();
//                self.endPullDownToRefresh();
//              }, 1000);
//
//            }
//          },
//          up: {
//            callback: function() {
//              var self = this;
//              setTimeout(function() {
//                vm.form.page++;
//                vm.getDeviceList();
//                self.endPullUpToRefresh(); 
//              }, 1000);
//            }
//          }
//        });

//        mui("#item1 .mui-scroll").pullToRefresh().endPullUpToRefresh(true);
          // mui("#item2 .mui-scroll").pullToRefresh().endPullUpToRefresh(true);
        });
      })(mui);
    </script>
  </body>

</html>